<script lang="tsx" setup>
/**
 * 产量达成率
 */
import {DateFilterEnum} from "@/pages/data-cockpit/index.ts"
import {nextTick, onMounted, onUnmounted, ref, watch} from "vue"
import * as echarts from 'echarts'

/**
 * 定义props
 */
const props = defineProps<{
  badReasonData: any
}>()

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "change", data: any): void
}>()

/**
 * 时间筛选类型
 */
const dateType = ref(DateFilterEnum.周)

/**
 * 时间类型改变
 */
const handleDateChange = (value: number) => {
  dateType.value = value
  emit('change', dateType.value)
}

/**
 * echarts
 */
const chartRef = ref()
let myChart: echarts.ECharts | null = null

/**
 * 初始化
 */
onMounted(() => {
  initEcharts()
})

/**
 * 取消挂载
 */
onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', handleResize)
    myChart.dispose()
  }
})

/**
 * 重载echarts大小
 */
const handleResize = () => {
  myChart?.resize()
}

/**
 * 初始化echarts
 */
const initEcharts = () => {
  if (!chartRef.value) return
  myChart = echarts.init(chartRef.value)
  const option = {
    grid: {
      top: '10%',
      left: '10%',
      right: '0',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        fontSize: "14rem",
        color: "#ffffff"
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: "14rem",
        color: "#ffffff"
      }
    },
    dataZoom: [{
      startValue: 0,
      endValue: 2,
      xAxisIndex: [0],
      zoomLock: true,
      height: "15%",
      bottom: "20%"
    }],
    series: [
      {
        name: "不良原因",
        type: 'bar',
        barMaxWidth: '12rem',
        data: [0, 0, 0, 0, 0, 0, 0],
        itemStyle: {
          borderRadius: [10, 10, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: 'rgba(210, 139, 48, 0.75)'
            },
            {
              offset: 0.3,
              color: 'rgba(255, 160, 38, 1)'
            }
          ])
        }
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', handleResize)
}

/**
 * 获取数据
 */
const getData = async (value: any) => {
  const option: any = myChart?.getOption()
  option.xAxis = {
    type: 'category',
    axisLabel: {
      fontSize: "14rem",
      color: "#ffffff"
    },
    data: value.map((item: any) => item.name)
  }
  option.series[0].data = value.map((item: any) => item.num)
  myChart?.setOption(option)
}

/**
 * 监视
 */
watch(() => props.badReasonData, (newValue) => {
  if (newValue) {
    nextTick(() => {
      getData(newValue)
    })
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="bad-reason">
    <div class="title-box">
      <div class="title-img">
        <img alt="" class="title-img-logout" src="/img/data-cockpit/item-title.png"/>
      </div>
      <div class="title">
        <div class="title-content">不良原因分析</div>
        <div class="title-time">
          <div :class="{'title-time-item-active':dateType !== DateFilterEnum.周}" class="title-time-item"
               @click="handleDateChange(DateFilterEnum.周)">周
          </div>
          <div :class="{'title-time-item-active':dateType !== DateFilterEnum.月}" class="title-time-item"
               @click="handleDateChange(DateFilterEnum.月)">月
          </div>
          <div :class="{'title-time-item-active':dateType !== DateFilterEnum.年}" class="title-time-item"
               @click="handleDateChange(DateFilterEnum.年)">年
          </div>
        </div>
      </div>
    </div>
    <div class="form">
      <div ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>